<template>
  <div>
    <el-submenu
      v-if="childrenArr.children && childrenArr.children.length > 0"
      :index="(childrenArr.path || childrenArr.name) + ''"
    >
      <template slot="title">
        <i :class="childrenArr.menuIcon || ''"></i>
        <span slot="title">{{ childrenArr.name }}</span>
      </template>
      <div v-for="(child) in childrenArr.children" :key="child.id">
        <menu-left :childrenArr="child" @saveInfo="saveInfo" />
      </div>
    </el-submenu>
    <el-menu-item
      v-else
      :index="(childrenArr.path || childrenArr.name) + ''"
      @click="saveInfo(childrenArr)"
    > 
      <i :class="childrenArr.menuIcon || ''"></i>
      <span slot="title" :title="childrenArr.name">{{ childrenArr.name }}</span>
    </el-menu-item>
  </div>
</template>

<script>
export default {
  name: "menuLeft", 
  props: {
    childrenArr: {
      type: Object || Array,
      default: () => [],
    },
  },
  data() {
    return {
    };
  },
  methods: {
    // 保存菜单信息
    saveInfo(info) {
      this.$emit("saveInfo", info);
      // 这里的path,之前是.id 
      this.$store.commit("homeStore/setEditableTabsValue", info.name); 
      return;
    },
  },
};
</script>
<style lang="scss">
.el-submenu [class^="el-icon-"] {
  margin-right: 5px;
  width: 24px;
}
.el-menu-item [class^="el-icon-"] {
  width: 24px;
}

.el-menu {
  border: 0;
}

.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
  height: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}
</style>
